<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>MianYang-MAP</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.9.2/mapbox-gl-language.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./center.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%
        }

        .marker {
            background-image: url('./img/maps.png');
            background-size: cover;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
        }

        .mapboxgl-popup {
            max-width: 200px;
        }

        .mapboxgl-popup-content {
            text-align: center;
            font-family: "Open Sans", sans-serif
        }

        .map-overlay {
            font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0, 10);
            border-radius: 3px;
            position: absolute;
            width: 25%;
            top: 10px;
            left: 10px;
            padding: 10px;
            display: none
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div id="map-overlay" class="map-overlay"></div>
    <script>
        mapboxgl.accessToken =
            "pk.eyJ1IjoiaWRheHl0IiwiYSI6ImNqamlva3YzcjAwcXUzcXF3NXVjNmRxZTcifQ.4bA_AtQCKSy_9j-v4CfMDw";
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/idaxyt/cjjumu7c90efh2rnojs1m2p54',
            // style: 'mapbox://styles/mapbox/dark-v9',
            center: [104.79133842202579, 31.789613787098332],
            pitch: 60,
            zoom: 9
        })
        // add markers to map
        // var geojson = geo;
        // geojson.features.forEach(function (marker) {
        //     var el = document.createElement('div');
        //     el.className = 'marker';
        //     //make a marker for each feature and add to the map
        //     new mapboxgl.Marker(el)
        //         .setLngLat(marker.properties.center)
        //         .addTo(map);
        //     // new mapboxgl.Marker(el, {offset: [-50/2, -50/2]})
        //     // .setLngLat(marker.geometry.coordinates)
        //     // .setPopup(new mapboxgl.Popup({offset: 25})) //add popups
        //     // .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>')
        //     // .addTo(map)
        // })


        //add overlay
        var overlay = document.getElementById('map-overlay');
        // Create a popup, but don't add it to the map yet.
        var popup = new mapboxgl.Popup({
            closeButton: false
        });

        map.on('load', function () {
            // Add the source to query. In this example we're using
            // county polygons uploaded as vector tiles
            // map.addSource('counties', {
            //     "type": "vector",
            //     "url": "mapbox://mapbox.82pkq93d"
            // });
            map.addSource('counties', {
                "type": "geojson",
                "data": geo
            })
            // map.addLayer({
            //     "id": "counties",
            //     "type": "fill",
            //     "source": "counties",
            //     // "source-layer": "original",
            //     "paint": {
            //         "fill-outline-color": "rgba(0,0,0,0.1)",
            //         /* 轮廓颜色 */
            //         "fill-color": "rgba(0,0,0,0.1)" /* 填充颜色 */
            //     }
            // }, 'place-city-sm'); // Place polygon under these labels.

            // map.addLayer({
            //     "id": "counties-highlighted",
            //     "type": "fill",
            //     "source": "counties",
            //     // "source-layer": "original",
            //     "paint": {
            //         "fill-outline-color": "#484896",
            //         "fill-color": "#6e599f",
            //         "fill-opacity": 0.75 /* 填充透明度 */
            //     },
            //     "filter": ["in", "COUNTY", ""] /* 数据过滤器 */
            // }, 'place-city-sm'); // Place polygon under these labels.

        //     map.on('mousemove', function (e) { /* mousemove 鼠标指针移动时发生 */
        //         var features = map.queryRenderedFeatures(e.point, { /* queryRenderedFeatures  ([geometry], [parameters])：在特定的几何形状内查询满足条件的可视化的GeoJSON特性对象数组  */
        //             layers: ['counties']
        //         });

        //         // Change the cursor style as a UI indicator.
        //         map.getCanvas().style.cursor = features.length ? 'pointer' : ''; /* 设置鼠标样式 */

        //         // Remove things if no feature was found.
        //         if (!features.length) {
        //             popup.remove();
        //             map.setFilter('counties-highlighted', ['in', 'COUNTY', '']); /* 更新数据过滤器 */
        //             overlay.style.display = 'none'; /* 隐藏该标签 */
        //             return;
        //         }

        //         // Single out the first found feature on mouseove.
        //         var feature = features[0];

        //         // Query the counties layer visible in the map. Use the filter
        //         // param to only collect results that share the same county name.
        //         var relatedFeatures = map.querySourceFeatures('counties', { /* querySourceFeatures  (sourceID, [parameters])：在GeoJSON source或者矢量瓦片内查询满足条件的GeoJSON特性对象数组 */
        //             sourceLayer: 'original',
        //             filter: ['in', 'COUNTY', feature.properties.COUNTY] /* ["in", key, v0, ..., vn] set inclusion: feature[key] ∈ {v0, ..., vn} */
        //         });

        //         // Render found features in an overlay.
        //         overlay.innerHTML = '';

        //         // Total the population of all features
        //         var populationSum = relatedFeatures.reduce(function (memo, feature) {
        //             return memo + feature.properties.population;
        //         }, 0);

        //         var title = document.createElement('strong');
        //         title.textContent = feature.properties.COUNTY + ' (' + relatedFeatures.length +
        //             ' found)'; /* 更新文本内容 */

        //         var population = document.createElement('div');
        //         population.textContent = 'Total population: ' + populationSum.toLocaleString();

        //         overlay.appendChild(title);
        //         overlay.appendChild(population);
        //         overlay.style.display = 'block';

        //         // Add features that share the same county name to the highlighted layer.
        //         map.setFilter('counties-highlighted', ['in', 'COUNTY', feature.properties.COUNTY]); /* 更新高亮layer的过滤器，显示相关数据 */

        //         // Display a popup with the name of the county
        //         popup.setLngLat(e.lngLat)
        //             .setText(feature.properties.COUNTY)
        //             .addTo(map);
        //     });
        });

        //map language translate English to Chinese
        mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
        map.addControl(new MapboxLanguage({
            defaultLanguage: 'zh'
        }))
    </script>
</body>

</html>